@page
@{ Layout = "_Layout"; }
@section Styles{
  <style>
    .el-alert {padding: 2px}
  </style>
}

<el-container>
  <el-aside width="100px">
    <el-tabs v-model="navType" tab-position="left" style="height: 100%;" v-on:tab-click="btnNavClick">
      <el-tab-pane label="数据列表" name="Data"></el-tab-pane>
      <el-tab-pane label="字段管理" name="Styles"></el-tab-pane>
      <el-tab-pane label="选项设置" name="Settings"></el-tab-pane>
    </el-tabs>
  </el-aside>

  <el-container>
    <el-main>

      <el-row>
        <el-form v-on:submit.native.prevent :inline="true" size="mini" label-width="100px">
          <el-form-item label="">
            <el-date-picker type="datetime" placeholder="选择开始日期" v-model="searchForm.startDate"
                value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%"></el-date-picker>
          </el-form-item>
          <el-form-item label="">
            <el-date-picker type="datetime" placeholder="选择结束日期" v-model="searchForm.endDate"
                value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%"></el-date-picker>
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="searchForm.keyword" placeholder="搜索关键词"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="mini" type="primary" v-on:click="btnSearchClick">搜 索</el-button>
          </el-form-item>
        </el-form>
      </el-row>

      <el-row id="commands">
        <el-button size="mini" plain type="primary" icon="el-icon-circle-plus-outline" v-on:click="btnAddClick">
          添 加
        </el-button>
        <el-button size="mini" plain type="primary" icon="el-icon-upload" style="margin-left: 0;" v-on:click="btnImportClick">
          导 入
        </el-button>
        <el-button size="mini" plain type="primary" icon="el-icon-download" style="margin-left: 0;" v-on:click="btnExportClick">
          导 出
        </el-button>
        <el-button size="mini" plain type="primary" icon="el-icon-delete" style="margin-left: 0;" :disabled="!isChecked" 
          v-on:click="btnDeleteSelectedClick">
          删除
        </el-button>
        <el-popover
          id="sortColumns"
          placement="top"
          width="360"
          trigger="click">
          <div>
            设置显示列
          </div>
          <el-table
            :data="columns"
            size="mini"
            style="width: 100%; overflow: auto; max-height: 500px !important">
            <el-table-column prop="displayName"></el-table-column>
            <el-table-column prop="attributeName"></el-table-column>
            <el-table-column align="right" width="80">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.isList"
                  v-on:change="handleColumnsChange"
                  size="mini">
                </el-switch>
              </template>
            </el-table-column>
          </el-table>
          <el-button slot="reference" size="mini" plain type="primary" icon="el-icon-arrow-down el-icon--right">
            显示列
          </el-button>
        </el-popover>
      </el-row>
      
      <el-divider></el-divider>
      
      <el-table :data="items" stripe style="width: 100%" v-on:selection-change="handleSelectionChange">
        <el-table-column type="selection" width="45" align="center"></el-table-column>
        <el-table-column
          v-for="attributeName in allAttributeNames" 
          :key="attributeName" 
          v-if="listAttributeNames.indexOf(attributeName) !== -1"
          :label="getAttributeText(attributeName)">
          <template slot-scope="scope">

            <el-image
              v-if="getAttributeType(attributeName) === 'Image' && getAttributeValue(scope.row, attributeName)"
              :src="getAttributeValue(scope.row, attributeName)"
              style="max-height: 100px; max-width: 100px; cursor: pointer;"
              v-on:click="largeImage(scope.row, attributeName)">
            </el-image>
            <div v-else>
              <el-link type="primary" :underline="false" v-on:click.stop.native="btnDataClick(scope.row)">
                {{ getAttributeValue(scope.row, attributeName) }}
              </el-link>
            </div>

          </template>
        </el-table-column>
        <el-table-column v-if="isReply" label="是否回复" width="80">
          <template slot-scope="scope">
            <el-alert v-if="scope.row.isReplied" title="已回复" type="success" :closable="false" center></el-alert>
            <el-alert v-else title="未回复" type="error" :closable="false" center></el-alert>
          </template>
        </el-table-column>
        <el-table-column v-if="isReply && listAttributeNames.indexOf('ReplyDate') !== -1" prop="replyDate" label="回复时间"></el-table-column>
        <el-table-column v-if="isReply && listAttributeNames.indexOf('ReplyContent') !== -1" prop="replyContent" label="回复内容"></el-table-column>
        <el-table-column v-if="listAttributeNames.indexOf('ChannelId') !== -1" prop="channelPage" label="所在栏目页"></el-table-column>
        <el-table-column v-if="listAttributeNames.indexOf('ContentId') !== -1" prop="contentPage" label="所在内容页"></el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-link :underline="false" v-if="isReply" v-on:click="btnReplyClick(scope.row.id)" type="primary">回复</el-link>
            <el-link :underline="false" v-on:click="btnEditClick(scope.row.id)" type="primary">编辑</el-link>
            <el-link :underline="false" type="danger" v-on:click="btnDeleteClick(scope.row.id)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      
      <el-row style="margin-top: 15px;">
        <el-col :span="24" align="center">
          <el-pagination
            size="mini"
            background
            v-on:current-change="handleCurrentChange"
            :current-page="page"
            :page-size="pageSize"
            layout="total, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-col>
      </el-row>

    </el-main>
  </el-container>
</el-container>

<el-drawer
  title="导入表单数据"
  ref="uploadPanel"
  :visible.sync="uploadPanel"
  destroy-on-close
  direction="rtl"
  size="50%">
  <div class="drawer__content">
    <br />
    <el-form ref="uploadForm" label-width="200px">
      <el-upload
        :drag="true"
        :limit="1"
        :action="urlUpload"
        :auto-upload="true"
        :headers="{Authorization: 'Bearer ' + $token}"
        :file-list="uploadList"
        :before-upload="uploadBefore"
        :on-progress="uploadProgress"
        :on-success="uploadSuccess"
        :on-error="uploadError"
        :multiple="false">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          <el-link :underline="false" type="primary" href="/sitefiles/assets/uploadtemplates/表单导入模板.xlsx" target="_blank">
            <i class="el-icon-download"></i>
            下载导入模版
          </el-link>
        </div>
      </el-upload>
    </el-form>
  </div>
</el-drawer>

@section Scripts{
  <script src="/sitefiles/assets/js/admin/cms/formData.js" type="text/javascript"></script>
}
